<template>
  <view-box ref="viewBox" body-padding-bottom="55px">
    <search-bar></search-bar>
    <swiper auto loop :aspect-ratio="1/2" :list="list" v-if="list.length > 0"></swiper>
    <tab :line-width="2" v-model="category">
      <tab-item>天南山文化</tab-item>
      <tab-item>天南山读书会</tab-item>
    </tab>
    <panel :list="computedList" type="5"></panel>
    <box gap="0 10px 10px 10px">
      <div class="course">
        <div @click="$router.push('/courses?category=1')"><img src="../home/images/c1.png" alt=""></div>
        <div @click="$router.push('/courses?category=2')"><img src="../home/images/c2.png" alt=""></div>
        <div @click="$router.push('/courses?category=3')"><img src="../home/images/c3.png" alt=""></div>
        <div @click="$router.push('/courses?category=4')"><img src="../home/images/c4.png" alt=""></div>
        <div @click="$router.push('/courses?category=5')"><img src="../home/images/c5.png" alt=""></div>
        <div @click="$router.push('/courses?category=6')"><img src="../home/images/c6.png" alt=""></div>
        <div @click="$router.push('/welcome')"><img src="../home/images/c7.png" alt=""></div>
        <div @click="$router.push('/forum')"><img src="../home/images/c8.png" alt=""></div> 
      </div>
    </box>
    <div class="gutter"></div>
    <footer-bar  slot="bottom" selected="category"></footer-bar>
  </view-box>
</template>
<script>
  import { ViewBox, Box, Panel, Tab, TabItem, Swiper } from 'vux'
  import FooterBar from '../components/FooterBar'
  import SearchBar from '../components/SearchBar'
  export default {
    data () {
      return {
        category: 0,
        posts: null,
        ads: []
      }
    },
    components: {
      ViewBox,
      FooterBar,
      SearchBar,
      Box,
      Panel,
      Tab,
      TabItem,
      Swiper
    },
    mounted () {
      this._getPosts()
      this._getAds()
    },
    computed: {
      list () {
        let data = []
        this.ads.forEach((item) => {
          data.push({
            img: this.$apiUrl + '/storage/' + item.body,
            url: item.url,
            title: item.title
          })
        })
        return data
      },
      computedList () {
        let list = []
        if (this.posts && this.posts[this.category]) {
          list.push({
            src: this.$apiUrl + '/storage/' + this.posts[this.category].thumb,
            title: this.posts[this.category].title,
            desc: this.posts[this.category].description,
            url: '/posts/' + this.posts[this.category].id
          })
        }
        return list
      }
    },
    methods: {
      onItemClick (id) {
        this.category = id
      },
      _getAds () {
        this.$http.get('/ads?position=9&page_size=5&order_by=order&order_type=asc').then((response) => {
          this.ads = response.data.data
        })
      },
      _getPosts () {
        this.$vux.loading.show()
        this.$http.get('/posts/latest').then((response) => {
          this.$vux.loading.hide()
          this.posts = response.data
        }).catch((error) => {
          console.log(error)
          this.$vux.loading.hide()
        })
      }
    }
  }
</script>
<style scoped lang="less">
  .course {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    div {
      width: 48%;
      margin-top: 0px;
      img {
        width: 100%;
      }
    }
  }
  .cover {
    max-width: 100%;
  }
</style>